import React from 'react';
import { Link } from 'react-router-dom';


import styles from './index.module.less';

export default class Nav extends React.Component {
  state = {
    categoryMenu: [
      {
        key: 1,
        name: '废金属',
        active: false,
        icon: 'icon-feijinshu',
      },
      {
        key: 2,
        name: '废塑料',
        active: false,
        icon: 'icon-feisuliao',
      },
      {
        key: 3,
        name: '废纸',
        active: false,
        icon: 'icon-feizhi',
      },
      {
        key: 4,
        name: '二手设备',
        active: false,
        icon: 'icon-ershoushebei',
      },
      {
        key: 5,
        name: '纺织皮革',
        active: false,
        icon: 'icon-fangzhipige',
      },
      {
        key: 6,
        name: '电子电器',
        active: false,
        icon: 'icon-dianzidianqi',
      },
      {
        key: 7,
        name: '轮胎橡胶',
        active: false,
        icon: 'icon-luntaixiangjiao',
      },
      {
        key: 8,
        name: '交通运输',
        active: false,
        icon: 'icon-jiaotongyunshu',
      },
      {
        key: 9,
        name: '家具木材',
        active: false,
        icon: 'icon-jiajumucai',
      },
      {
        key: 10,
        name: '其他废品',
        active: false,
        icon: 'icon-qitafeipin',
      },
    ],
    selectedChildren: null,
    selectedCategory: null,
    city: {
      cityList: [ '全国', '北京', '上海', '深圳', '广州', '杭州', '成都', '南京', '西安' ],
      allCity: [],
    },
  };

  componentDidMount() {
    this.setState({
      selectedChildren: 0,
      selectedCategory: 0,
    });
  }

  // 鼠标点击大类时，激活弹窗，并设置子类
  indexClick = index => {

    this.setState(prevState => {
      const { categoryMenu } = prevState;
      return {
        categoryMenu,
        selectedChildren: null,
        selectedCategory: index,
      };
    });
  };
  // 鼠标点击小类时,激活弹窗,并遍设置子类
  indexChildrenClick = index => {
    this.setState(prevState => {
      const { categoryMenu } = prevState;
      return {
        categoryMenu,
        selectedChildren: index,
        selectedCategory,
      };
    });
  };
  onPickUpClick() {
    this.setState(prevState => {
      const { categoryMenu } = prevState;
      return {
        categoryMenu,
        selectedChildren: null,
        selectedCategory: null,
      };
    });
  }
  render() {
    const { categoryMenu, selectedCategory, selectedChildren, city } = this.state;

    return (
      <div className={styles.Category}>
        <div className={styles.product}>
          <div className={styles.line}>
            <div className={styles.classify}>经营范围</div>
            <div className={styles.inlineblock + ' ' + styles.kinds}>
              <Link to='/' className={styles.unlimit}>不限</Link>
              <React.Fragment>
                {
                  categoryMenu.map((item, index) => {
                    return (
                      <Link to="/" key={item.key} onClick={this.indexClick.bind(this, index)}>{item.name}</Link>
                    );
                  })
                }
              </React.Fragment>
            </div>
          </div>
        </div>
        <div className={styles.city}>
          <span className={styles.s1}>企业地区</span>
          <Link to='' className={styles.a1}>大连</Link>
          <span>热门城市 :</span>
          <React.Fragment>
            { city.cityList.map((item, index) => {
              return (
                <Link to='/' key={index} className={styles.citys}>{item}</Link>
              );
            })
            }
          </React.Fragment>
          <Link to='/'>全部城市</Link>
        </div>
      </div>
    );
  }
}
